<template>
  <div>
    <div class="wrapper tag-item">
      <div class="fl left-list">
        <div class="tc-data-list">
          <div class="tc-list" v-infinite-scroll="loadMore">
            <ul class="detail-list">
              <li class="qa-item" v-for="(item,index) in items" :key="index">
                <div class="fl record">
                  <div class="number">
                    <div class="border useful">
                      <a class="text">{{item.username}}</a>
                    </div>

                    <div class="border answer">
                      <a href="#" class="star">
                        <i class="fa fa-star-o" aria-hidden="true"></i>
                      </a>
                    </div>
                  </div>
                </div>
                <div class="info">
                  <div class="fl date">
                    <p class="text">{{item.createDateStr}}</p>
                  </div>
                  <br>
                  <h2>
                    <a id="title" :href="item.url" target="_blank">{{item.title}}</a>
                  </h2>
                  <p class="text">{{item.addressDesc}}</p>
                  <div class="other">
                    <div class="fr remark">
                      <a href="#" data-toggle="modal" data-target="#shareModal" class="share">
                        <i class="fa fa-share-alt" aria-hidden="true"></i> 分享
                      </a>
                      <a href="#" data-toggle="modal" data-target="#remarkModal" class="comment">
                        <i class="fa fa-commenting" aria-hidden="true"></i> 回复
                      </a>
                    </div>
                  </div>
                </div>
                <div class="clearfix"></div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="fl right-tag">
        <div class="block-btn">
          <p>你的知识也可以在广场中找到哦</p>
            <el-button type="primary" @click="gotoManager()">
              上传知识
              <i class="el-icon-upload el-icon--right"></i>
            </el-button>
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
  </div>
</template>

<style>
#title {
  color: rosybrown;
  text-decoration: none;
  size: 20px;
  font-family: "PingFang SC";
}
</style>

<script>
import "~/assets/square/bootstrap.min.css";
import "~/assets/square/page-sj-spit-index.css";
import addressApi from "@/api/address";

export default {
  layout: "square",
  asyncData() {
    return addressApi.pageList(1, 10).then(res => {
      return { items: res.data.rows.rows };
    });
  },
  data() {
    return {
      pageNo: 1
    };
  },
  methods: {
    loadMore() {
      this.pageNo++;
      addressApi.pageList(this.pageNo, 10).then(res => {
        this.items = this.items.concat(res.data.rows.rows);
      });
    },
    gotoManager(){
      location.href="/manager"
    }
  }
};
</script>

